// 导入语句
@themes: "./";

@import "@{themes}theme.less";
@import "./parentSelector.less";
@import "./import.less";
// 变量
// 属性变量
@link-color: white; // sea blue
@link-color-hover: darken(@link-color, 10%);
@link-color-hover-2: #42b8ca;
@primary: #42b8ca;
@secondary: blue;
@color: primary;

// 可变差值
// 选择器
@main: main;
// URLs
@images: "./imgs";
// 属性
@bgColor: background-color;
@bg: background;

body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  // background-color: aqua;
  background-image: url("@{images}/海贼王.png");
}

.@{main} {
  cursor: pointer;
  width: 200px;
  height: 200px;
  text-align: center;
  align-items: center;
  align-content: center;
  @{bg}-color: @primary;
  color: red;
  &:hover {
    background-color: $color;
  }
}

// 延迟评估
// 变量在使用前不必声明
// @var: @a;
// @a: red;

@var: 0;
.class {
  @var: 1;
  .brass {
    // @var: 2;
    three: @var;
    // @var: 3;
  }
  one: @var;
}
